<!--
 * @Author: linjituan linjituan@revolution.com
 * @Date: 2024-10-01 19:23:07
 * @LastEditors: Evan.林 7420884+lovereal@user.noreply.gitee.com
 * @LastEditTime: 2024-11-27 23:25:30
 * @FilePath: \hm-twx-admin\src\views\home\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEom
-->
<script setup lang="ts">
import { createFollowPin, getFollowingList } from "@/api/metaIO/index";
import { getPinPage } from "@/api/pin/index";
import { commentBox } from "@/components/commentBox/index";
import { msgPost } from "@/components/Post/index";
import { postCell } from "@/components/PostCell/index";
import { store } from "@/store";
import { useAppStore } from "@/store/modules/app";
import { userStore } from "@/store/modules/walletUser";
import { onMounted, onUnmounted, ref } from "vue";

const appStore = useAppStore();
const wUserStore = userStore(store);
const isMobile = ref(appStore.isMobile);
const listContainer = ref<HTMLElement | null>(null);
const loading = ref(false);
const followLoading = ref(false);
const activeKey = ref("New");
const followingList = ref();
const currentBuzzId = ref();
const newlLoadTip = ref();
const followingLoadTip = ref();

// 设置当前的模拟地址值（登录钱包后获取）
let page = 1;
let followPage = 1;

const msgList: any = ref([]);
const followMsgList: any = ref([]);
// 监听isMobile的变化
appStore.$subscribe((mutation, state) => {
  console.log("mutation", mutation);
  console.log("state", state);
  isMobile.value = state.isMobile;
});

console.log("appStore ****", appStore.isMobile);

function resetBuzzPage() {
  if (activeKey.value === "Following") {
    followPage = 1;
    followMsgList.value = [];
    followLoading.value = true;
    createFollowPinFn();
  } else {
    page = 1;
    msgList.value = [];
    loading.value = true;
    getPinPageFn();
  }
}

function getPinPageFn() {
  newlLoadTip.value = "Loading...";
  getPinPage({
    page,
    limit: "5",
    path: "/protocols/simplebuzz,/protocols/banana",
  }).then(async (res) => {
    console.log("getMetaidPage", res);
    for (const item of res.list) {
      if (Array.isArray(msgList.value)) {
        msgList.value.push(item);
      } else console.error("msgList.value 不是一个数组");
    }
    console.log("msgList", msgList.value);
    if (msgList.value.length >= res.total) {
      loading.value = false;
      newlLoadTip.value = "No more";
    } else {
      loading.value = true;
      newlLoadTip.value = "Load more";
    }
  });
}

function getFollowingListFn(metaid) {
  return new Promise((resolve) => {
    getFollowingList(metaid).then((res) => {
      console.log("getFollowingList", res);
      followingList.value = res.list;
      resolve(res);
    });
  });
}

function createFollowPinFn() {
  followingLoadTip.value = "Loading...";
  createFollowPin({
    metaidList: followingList.value,
    page: followPage,
    path: "/protocols/simplebuzz,/protocols/banana",
    size: 5,
  }).then(async (res) => {
    console.log("createFollowPin", res);
    for (const item of res.list) {
      if (Array.isArray(followMsgList.value)) {
        followMsgList.value.push(item);
      } else console.error("followMsgList.value 不是一个数组");
    }
    console.log("followMsgList", followMsgList.value);
    if (followMsgList.value.length >= res.total) {
      followLoading.value = false;
      followingLoadTip.value = "No more";
    } else {
      followLoading.value = true;
      followingLoadTip.value = "Load more";
    }
  });
}

function laodingCurrentList() {
  if (activeKey.value === "Following") {
    followPage++;
    createFollowPinFn();
  } else {
    page++;
    getPinPageFn();
  }
}

// 滚动到底部时继续加载列表
const handleScroll = () => {
  const container = listContainer.value;
  if (!container) return;

  const { scrollTop, scrollHeight, clientHeight } = container;
  if (
    scrollTop + clientHeight >= scrollHeight - 10 &&
    ((activeKey.value === "Following" && followLoading.value) ||
      (activeKey.value === "New" && loading.value))
  ) {
    laodingCurrentList();
  }
};

async function handleActiveKey(key) {
  activeKey.value = key;
  if (key === "Following") {
    console.log("wUserStore.userInfoObj", wUserStore.userInfoObj);
    await getFollowingListFn(wUserStore.userInfoObj.metaid);
    if (followMsgList.value.length === 0) {
      createFollowPinFn();
    }
  } else {
    if (msgList.value.length === 0) {
      getPinPageFn();
    }
  }
}

function showBuzzDetail(id: string) {
  console.log("showBuzzDetail", id);
  currentBuzzId.value = id;
}

onMounted(async () => {
  // getMetaidPage({
  //   pageNo: '1',
  //   pageSize: '10',
  // }).then((res) => {
  //   console.log('getMetaidPage', res)
  // })
  // getMetaid('2090c64a431ae47fb9b3b351c3a2e38d1d03fd0a4c7f05209d26bbe08ca1d7a6')
  getPinPageFn();
  if (listContainer.value) {
    console.log("listContainer.value", listContainer.value);
    listContainer.value.addEventListener("scroll", handleScroll);
  }
});

onUnmounted(() => {
  if (listContainer.value) {
    listContainer.value.removeEventListener("scroll", handleScroll);
  }
});
</script>

<template>
  <div class="home-wrap" ref="listContainer">
    <!-- <div class="top-navbar">
      <div class="top-navbar-left">
        <img class="logo-img" src="@/assets/images/my.png" alt="" />
      </div>
      <div class="top-navbar-right">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-pencil-line border rounded-full text-main bg-[black] p-2 cursor-pointer ml-2 w-9 h-9 md:w-12 md:h-12"
        >
          <path d="M12 20h9"></path>
          <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"></path>
          <path d="m15 5 3 3"></path>
        </svg>
      </div>
    </div> -->
    <div class="home-content">
      <div v-if="!isMobile" class="content-left"></div>
      <div class="home-content-center">
        <div class="cell-wrap">
          <postCell @resetBuzzPage="resetBuzzPage"></postCell>
        </div>
        <div class="nav-top">
          <div
            class="nav-item nav-item-left"
            :class="activeKey === 'New' ? 'active' : ''"
            @click="activeKey = 'New'"
          >
            New
          </div>
          <div
            class="nav-item nav-item-right"
            :class="activeKey === 'Following' ? 'active' : ''"
            @click="handleActiveKey('Following')"
          >
            Following
          </div>
        </div>
        <div class="body">
          <div v-show="activeKey === 'New'" class="list">
            <msgPost
              v-for="item in msgList"
              :key="item.id"
              :pinInfo="item"
              style="margin-bottom: 20px"
              @showBuzzDetail="showBuzzDetail"
            />
            <div class="load-tip">
              {{ newlLoadTip }}
            </div>
          </div>
          <div v-show="activeKey === 'Following'" class="list">
            <msgPost
              v-for="item in followMsgList"
              :key="item.id"
              :pinInfo="item"
              style="margin-bottom: 20px"
              @showBuzzDetail="showBuzzDetail"
            />
            <div class="load-tip">
              {{ followingLoadTip }}
            </div>
          </div>
        </div>
      </div>
      <div v-if="!isMobile" class="content-right">
        <!-- <rightCard />
        <rightCard />
        <rightCard /> -->
      </div>
    </div>
    <commentBox
      v-if="currentBuzzId"
      :id="currentBuzzId"
      @showBuzzDetail="showBuzzDetail"
      @close="currentBuzzId = ''"
    ></commentBox>
  </div>
</template>

<style scoped  lang="less">
.home-wrap {
  display: flex;
  height: 100%;
  overflow: auto;
  background: #f1f1f1;

  .top-navbar {
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px;
    background: #00b1ff;
  }

  .top-navbar-left {
    padding-left: 4px;

    .logo-img {
      width: 60px;
      height: 60px;
    }
  }

  .top-navbar-right {
    padding-right: 4px;
  }

  .home-content {
    display: flex;
    flex: 1;

    .home-content-center {
      flex: 1.5;
      // border-right: 1px solid #f2f2f2;
      // border-left: 1px solid #f2f2f2;

      .nav-top {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 10px 20px;
        color: #fff;
        border-radius: 14px;

        .nav-item {
          flex: 1;
          padding: 10px 0;
          color: #000;
          text-align: center;
          background: #fff;

          &.nav-item-left {
            border-top-left-radius: 14px;
            border-bottom-left-radius: 14px;
          }

          &.nav-item-right {
            border-top-right-radius: 14px;
            border-bottom-right-radius: 14px;
          }

          &.active {
            color: #fff;
            background: #00b1ff;
          }
        }
      }

      .cell-wrap {
        padding: 20px;
      }

      .body {
        padding: 20px 20px 130px;
      }
    }

    .content-right {
      flex: 1;
    }

    .content-left {
      flex: 1;
    }
  }

  .load-tip {
    color: #666;
    text-align: center;
  }
}
</style>
